<template>
    <div class="Creatores-box">
        <div class="head-box">
           <van-nav-bar :title="title" 
            left-arrow
         @click-left="goTo"
       
       >

          
            
        </van-nav-bar>
        </div>

        <div class="screen-box" v-if="showBox">
            <div class="order"  >
                <van-dropdown-menu>
                    <div @click="getref(value)">
                    <van-dropdown-item v-model="value" :options="options" >
                        
                        </van-dropdown-item>
                    </div>
                </van-dropdown-menu> 
            </div>
            <div class="categories">
                <van-dropdown-menu  >
                    
                    <van-dropdown-item :title="menu" ref="show" v-model="showed">
                        <van-cell  v-for="(item,index) in categories" :key="index" :class="active==index ?  'aviod'  :''" @click='current(index,item.value)'>
                        <div>{{item.title}}</div>
                        
                        </van-cell>    
                    </van-dropdown-item>       
                </van-dropdown-menu> 
            </div>
            
        </div>

        <div class="main-box">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :immediate-check="false"
                offset = 50
                >
                <van-cell  v-for="(item,id) in list"  :key="id"  >
                <div class="content-box" >
                    <div class="cont-top" >
                       <div class="icon"><img :src="item.avatar" alt="" @click="userID(item.id)"></div>
                       <div class="mesg">
                           <div class="left">
                               <div class="title">{{item.username}}</div>
                               <div class="text">{{item.occupation}}  <span v-if="item.location&&item.location.province">·{{item.location.province.name}}</span> · 粉丝{{item.count.count_follower}}</div>
                           </div>
                           <div class="fllow" @click="fllow()">
                               关注
                           </div>
                       </div>
                    </div>
                    <div class="cont-bottom" >
                        <div class="cover" v-for="v in item.articles" :key="v.id" @click="coverID(v.id)">
                            <img :src="v.cover" alt="">
                            <div class="duration">{{v.duration|duration}}</div>
                        </div>
                    </div>
                </div>

                </van-cell>
            </van-list>
            
        </div>


    </div>
</template>

<script>

    import Headnav from '../components/Headnav.vue'

    export default {
        name:'Creatores',
        data(){
            return{
                title:'',
               
                menu:'',
                value: 1,
                
                active: 0,
                page:1,
                type:'person',
                order:'hot',
                occupation:0,
                categories: [],
                list: [],
                showed:false,
                loading: false,
                finished: false,
                
                options: [
                    { text: '', value: 0 },
                    { text: '', value: 1 },
                    { text: '', value: 2 },
                ],
            
               
                showBox:false,


            }
        },

        components:{
            Headnav,
        },


        created(){

            this.title=this.$route.query.title
            if(this.title=="创作人"){
                this.type = 'person'
            }else if(this.title=="机构"){
                this.type = 'company'
            }
            
            this.axios({
                method:"get",

                 url:'https://apis.netstart.cn/xpc/creators',

                 params:{
                    
                    role_type:this.type,
                    order: this.order,
                    occupation_id:this.occupation,
                    page:this.page
                 }
                
            }).then(restul=>{
                if(restul.status==200){
                    this.showBox=true,
                    this.categories = restul.data.data.filter.categories.options;
                     this.categories.unshift({

                        title: "全部职业",
                        value: 0
                    })
                    
                    this.menu = restul.data.data.filter.categories.title
                    this.list = restul.data.data.list
                    
                    
                    for (let index = 0; index < this.options.length; index++) {
                        this.options[index].text=restul.data.data.filter.order.options[index].title
                        this.options[index].ref=restul.data.data.filter.order.options[index].value

                    }                 
                   
               

                }
            })






        },

         filters:{
                // 千/k  万/w
                userNums(num) {
                    return num / 10000 >= 1
                        ? (num / 10000).toFixed(1) + "w"
                        : num / 1000 >= 1
                        ? (num / 1000).toFixed(1) + "k"
                        : num;
                    },
                // 秒-->分
                 duration(s){
                    // const hour = parseInt(s / 3600) < 10 ? '0' + parseInt(s / 3600) : parseInt(s / 3600)
                    const min = parseInt(s % 3600 / 60) < 10 ? '0' + parseInt(s % 3600 / 60) : parseInt(s % 3600 / 60)
                    const sec = parseInt(s % 3600 % 60) < 10 ? '0' + parseInt(s % 3600 % 60) : parseInt(s % 3600 % 60)
                    return     min + ':' +  sec 


                 }   
                 
        },

        methods:{
            
            goTo(){
                this.$router.push({name: 'faxian', params: {}}); 
            },

            getAxios(){
                this.axios({
                method:"get",

                 url:'https://apis.netstart.cn/xpc/creators',

                 params:{
                    
                    role_type:this.type,
                    order: this.order,
                    occupation_id:this.occupation,
                    page:1
                 }
                
            }).then(restul=>{
                if(restul.status==200){
                    this.showBox=true,
                    this.categories = restul.data.data.filter.categories.options;
                    // this.menu = restul.data.data.filter.categories.title
                    this.list = restul.data.data.list
                    
                    for (let index = 0; index < this.options.length; index++) {
                        this.options[index].text=restul.data.data.filter.order.options[index].title
                        this.options[index].ref=restul.data.data.filter.order.options[index].value

                    }                 
                    this.categories.unshift({

                        title: "全部职业",
                        value: 0
                    })

                

                }
            })


            },    


            current(index){
            //index返回的是当前下标
            this.active = index;
            
            this.menu=this.categories[this.active].title
            this.occupation=this.categories[this.active].value
            this.$refs.show.toggle();
            this.getAxios();
        },

            getref(value){
               this.order=this.options[value].ref
               

                this.getAxios();

               
            },
            onLoad(){
               
                    this.page +=1;
                    // 加载状态结束
                   
                    // 数据全部加载完成
                     this.axios({
                method:"get",

                 url:'https://apis.netstart.cn/xpc/creators',

                 params:{
                    
                    role_type:this.type,
                    order: this.order,
                    occupation_id:this.occupation,
                    page:this.page
                 }
                
            }).then(restul=>{
                if(restul.status==200){
                   
                    this.list.push (...restul.data.data.list)   
                    
                     

                    this.loading = false;
                   
                }
            })
                   
                   
            },

            userID(id){
             
                this.$router.push({name:'author',query:{id:id}})
            },

            coverID(id){
                this.$router.push({name:'message',query:{id:id}})
            },
            fllow(){
                
            }

        }


    }
</script>

<style lang="less" >


        .screen-box{
            display: flex;

            .order{

                .van-dropdown-menu__title{
                    color: red;
                }
                
            }

            .categories{

                .van-dropdown-item{
                    

                    .van-dropdown-item__content{
                        display: flex;
                        flex-flow: wrap;
                        padding: 10px 20px;


                        .van-cell{
                            border: 1px solid #e3e3e3;
                            font-size: 12px;
                            max-width: 100px;
                            padding: 5px;
                            margin: 5px;  
                            width: 20%; 
                               
                        }
                        .van-cell__value--alone{
                            text-align: center;
                            
                        }

                    }


                }
                .van-dropdown-menu__title{
                    color: red;
                }


            }

           



            .van-dropdown-menu__bar{
                height: 40px;
                box-shadow: none;

                

                .van-dropdown-menu__item{
                    margin: 10px;
                   
                }

                .van-dropdown-menu__title{
                    font-size: 14px;
                }


            }

            .aviod{
                
                background-color: #fb9292;

                .van-cell__value--alone{
                    color: red;
                }
            }
            
            

        }

        .main-box{
           
            box-sizing: border-box;


            .content-box{
               
               border-bottom: 1px solid #dcdad9;
                width: 100%;
                height: 150px;

                .cont-top{
                     display: flex;
                    
                    .icon{
                        width: 50px;
                        height: 50px;
                         border-radius: 50%;

                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }

                    .mesg{
                        width: 84%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .left{
                            margin-left: 10px;
                        }
                        .fllow{
                            color: red;
                           width: 65px;
                           height: 30px;
                           line-height: 30px;
                            text-align: center;
                            border-radius: 15px;
                            background-color: #f3d1d1;
                            font-size: 13px;
                        }

                        .text{
                            font-size: 12px;
                            color: #c4c4c4;
                        }

                    }
                }

                .cont-bottom{
                    
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    .cover{
                        position: relative;
                        width: 110px;
                        height: 65px;
                        border-radius: 5px;


                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 5px;
                        }


                        .duration{
                            color: white;
                            font-size: 12px;
                            position: absolute;
                            bottom: 2%;
                            right: 5%;
                        }

                    }


                }

            }



        }



</style>